<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片马赛克化</title>
    <script src="js/jquery-1.11.1.min.js?v=1" type="text/javascript"></script>
    <style>
        *{padding:0;margin:0;}
        .wrap{position:relative;width: 100%;height: 1080px;max-width: 1920px;max-height: 1000px;margin:0 auto;overflow:hidden;background: #000;}
        .box{position:absolute;width: 1920px;height:1080px;top:0;left:50%;margin-left: -960px;z-index: 3;}
        canvas{width: 1920px;height: 1080px;position:absolute;top:0;left:50%;margin-left: -960px;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="box box1">
        <img src="images/bg2.jpg" id="dolly1" />
    </div>
</div>
<script src="js/close-pixelate.js" type="text/javascript"></script>
<script type="text/javascript">
    var p=40;//40px马赛克颗粒大小
    var pixelOpts = [{resolution: p}];
    var time;
    var pixelDolly1;
    window.onload=function(){
        f();
    };
    function f(){
        var dolly1 = document.getElementById('dolly1');
        pixelDolly1=dolly1.closePixelate(pixelOpts);
    }
</script>
</body>
</html>